<template>
	<div>我的客服</div>
	<el-button @click="showFAQs()">常见问题</el-button>
	<el-button @click="toAskPage()">我要提问</el-button>
</template>

<script setup>
	import {ref} from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus';
	import { useRouter, useRoute } from 'vue-router'
	import TopVue from '../components/Top.vue';
	const router = useRouter()
	const route = useRoute()
	
	const faqs = ref([
	    { question: '问题1', answer: '答案1' },
	    { question: '问题2', answer: '答案2' },
	    { question: '问题3', answer: '答案3' },
	  ]);
	
	  // 处理点击“常见问题”按钮
	  const showFAQs = () => {
	    let message = '<div style="max-height: 300px; overflow-y: auto;">';
	    faqs.value.forEach((faq, index) => {
	      message += `<p><strong @click="showAnswer(${index})">问题${index + 1}：</strong> ${faq.answer}</p>`;
	    });
	    message += '</div>';
	
	    ElMessageBox.alert(message, '常见问题', {
	      dangerouslyUseHTMLString: true,
	      confirmButtonText: '关闭',
	      showClose: true,
	      beforeClose: (action, instance, done) => {
	        // 禁止关闭模态框
	        done();
	      }
	    });
	  };
	
	const toAskPage = () => {
	    router.push({ path: '/ask' })
	}
	
	
	</script>
	
	<style scoped>
	.large-message-box .el-message-box__wrapper {
	  width: 60%; /* 自定义模态框宽度 */
	  max-width: 800px; /* 设置最大宽度 */
	}
	</style>